---
title: "Spinner"
description: "Spinner express an unspecified wait time or display the length of a process."
---

import {spinnerContent} from "@/content/components/spinner";

# Spinner

Spinner express an unspecified wait time or display the length of a process.

<ComponentLinks component="spinner" rscCompatible />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add spinner",
    npm: "npm install @heroui/spinner",
    yarn: "yarn add @heroui/spinner",
    pnpm: "pnpm add @heroui/spinner",
    bun: "bun add @heroui/spinner"
  }}
/>


## Import

<ImportTabs
  commands={{
    main: 'import {Spinner} from "@heroui/react";',
    individual: 'import {Spinner} from "@heroui/spinner";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={spinnerContent.usage} />

> **Note**: Spinner adds `Loading` as `aria-label` by default. This is required for accessibility. You can change it by passing a `label` or `aria-label` prop.

### Sizes

<CodeDemo title="Sizes" files={spinnerContent.sizes} />

### Colors

<CodeDemo title="Colors" files={spinnerContent.colors} />

### With Label

<CodeDemo title="With Label" files={spinnerContent.label} />

### Label colors

<CodeDemo title="Label colors" files={spinnerContent.labelColors} />

### Variants

<CodeDemo title="Variants" files={spinnerContent.variants} />

## Slots

- **base**: The base slot of the spinner, it wraps the circles and the label.
- **wrapper**: The wrapper of the circles.
- **circle1**: The first circle of the spinner component. (Effective only when variant is `default` or `gradient`)
- **circle2**: The second circle of the spinner component. (Effective only when variant is `default` or `gradient`)
- **dots**: Dots of the spinner component. (Effective only when variant is `wave` or `dots`)
- **spinnerBars**: Bars of the spinner component. (Effective only when variant is `spinner`)
- **label**: The label content.

<Spacer y={4} />

## API

### Spinner Props

<APITable
  data={[
    {
      attribute: "label",
      type: "string",
      description: "The content to display as the label.",
      default: "-"
    },
    {
      attribute: "size", 
      type: "sm | md | lg",
      description: "The size of the spinner circles.",
      default: "md"
    },
    {
      attribute: "color",
      type: "default | primary | secondary | success | warning | danger",
      description: "The color of the spinner circles.",
      default: "primary"
    },
    {
      attribute: "variant",
      type: "default | simple | gradient | wave | dots | spinner",
      description: "The variant of the spinner",
      default: "default"
    },
    {
      attribute: "labelColor",
      type: "default | primary | secondary | success | warning | danger", 
      description: "The color of the label.",
      default: "default"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<'base' | 'wrapper' | 'circle1' | 'circle2' | 'dots' | 'spinnerBars' | 'label', string>>",
      description: "Allows to set custom class names for the spinner slots.",
      default: "-"
    }
  ]}
/>
